import { useAtom, useAtomValue } from "jotai";
import { Select, SelectItem } from "shared/components";
import currentModelAtom from "@/store/currentModel";
import currentTypeAtom from "@/store/currentType";
import { clsxm } from "shared/helpers";

const models = ["qwen2:7b", "qwen:32b", "llama3-chinese:8b"];

export default function ModelSelector() {
  const [currentModel, setCurrentModel] = useAtom(currentModelAtom);
  const currentType = useAtomValue(currentTypeAtom);

  return (
    <div className={clsxm("flex items-center", currentType === 2 && "hidden")}>
      <span>模型：</span>
      <Select
        value={currentModel}
        onChange={setCurrentModel}
        onSelect={(v) => console.log({ v })}
        placeholder="請選擇模型"
      >
        {models.map((model) => (
          <SelectItem key={model} value={model} label={model} />
        ))}
      </Select>
    </div>
  );
}
